<template>
  <div class="common-layout">
    <el-container>
      <el-main class="login-wrapped">
        <div class="login-content">
          <el-card style="max-width: 480px" class="card">
            <el-tabs v-model="activeName" class="demo-tabs" :stretch="true" @tab-click="handleClick">
              <el-tab-pane label="登录" name="first">
                <el-form class="login-form">
                  <el-form-item label="账号">
                    <el-input v-model="loginData.account" placeholder="请输入账号" />
                  </el-form-item>
                  <el-form-item label="密码">
                    <el-input v-model="loginData.password" placeholder="请输入密码" type="password" />
                  </el-form-item>
                </el-form>
                <div class="footer-wrapper">
                  <div class="forget-password">
                    <span class="foget-password-btn" @click="goToForgetPassword">忘记密码</span>
                  </div>
                  <div class="login-btn">
                    <el-button type="primary" size="large" @click="goLogin">登录</el-button>
                  </div>
                  <div class="go-register">
                    还没有账号? <span class="go-register-btn" @click="activeName = 'second'">>马上注册</span>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="注册" name="second">
                <el-form class="login-form">
                  <el-form-item label="账号">
                    <el-input v-model="registerData.account" placeholder="请输入 6-12 位账号" />
                  </el-form-item>
                  <el-form-item label="密码">
                    <el-input v-model="registerData.password" placeholder="请输入 6-12 位数字英文" type="password" />
                  </el-form-item>
                  <el-form-item label="确认密码">
                    <el-input v-model="registerData.repassword" placeholder="请再次输入密码" type="password" />
                  </el-form-item>
                </el-form>
                <div class="footer-wrapper">
                  <div class="login-btn">
                    <el-button type="primary" size="large" @click="goRegister">注册</el-button>
                  </div>
                  <div class="go-register">
                    已有账号? <span class="go-register-btn" @click="activeName = 'first'">>马上登录</span>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </div>
        <div class="footer-content">
          <span class="coryright-text">Copyright © 2023-2024 智企后台</span>
        </div>
      </el-main>
    </el-container>
  </div>
  <forgetPW ref="forgetPWRef"></forgetPW>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import forgetPW from './components/forgetPW.vue'
import { registerAPI, loginAPI, getRouterByIdAPI } from '../../api/login'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { useUserInfo } from '../../store/userinfo'
import { saveLoginLogAPI } from '../../api/login_log'
import { userRouterStore } from '../../store/router'
import { Store } from "pinia"

const router = useRouter()

const userStore = useUserInfo() as Store<"userinfo", { imageUrl: string; name: string; sex: string; department: string; identity: string; account: string; email: string; }, {}, { userInfo }>


const routerStore = userRouterStore()

// 默认打开是登录
const activeName = ref('first')

// interface formData {
//   account: number | null
//   password: string
//   repassword?: string
// }

const loginData = reactive({
  account: '',
  password: ''
})

const registerData = reactive({
  account: '',
  password: '',
  repassword: ''
})

// 忘记密码
const forgetPWRef = ref()
const goToForgetPassword = () => {
  forgetPWRef.value.openDialog()
}

// 注册
const goRegister = async () => {
  if (registerData.password === registerData.repassword) {
    const res = await registerAPI(registerData)

    if (res.data.message === '注册成功' && res.data.status === 0) {
      ElMessage({
        message: '注册成功',
        type: 'success',
      })
      activeName.value = 'first'
    } else {
      ElMessage({
        message: `${res.data.message}`,
        type: 'error',
      })
    }
  } else {
    ElMessage({
      message: '两次密码不一致',
      type: 'error',
    })
  }
}

// 登录
const goLogin = async () => {
  const res = await loginAPI(loginData)

  if (res.data.message === '登录成功' && res.data.status === 0) {

    const token = res.data.token
    const id = res.data.results.id
    const account = res.data.results.account
    const name = res.data.results.name ? res.data.results.name : `用户${account}`
    const email = res.data.results.email ? res.data.results.email : '暂无邮箱'

    ElMessage({
      message: '登录成功',
      type: 'success',
    })

    localStorage.setItem('token', token)
    localStorage.setItem('id', id)

    // 登陆成功 获取对应的路由
    let routerList = []
    const res2 = await getRouterByIdAPI({ id })
    routerList = res2.data.data
    routerStore.setRouter(routerList)
    userStore.userInfo(id)

    setTimeout(() => {
      router.push('/home')
    }, 500)
    await saveLoginLogAPI({ account, name, email })

  } else {
    ElMessage({
      message: `${res.data.message}`,
      type: 'error',
    })
  }

}


</script>

<style lang="scss" scoped>
.login-wrapped {
  position: relative;
  background-image: url('@/assets/bg_zhiqi.png');
  height: 900px;
  width: 100%;
  background-size: cover;
  background-position: center center;

  .login-content {

    .card {
      position: absolute;
      right: 100px;
      margin-top: 140px;
      width: 480px;
      height: 480px;
      border-radius: 10px;
      background-color: #fff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      padding: 20px;
    }
  }

  .footer-content {
    position: absolute;
    bottom: 20px;
    width: 100%;
    margin: 0 auto;
    text-align: center;

    .coryright-text {
      font-size: 16px;
      color: #524d4d
    }
  }

  .login-form {
    margin-top: 20px;
  }

  .footer-wrapper {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .forget-password {
      width: 100%;
      text-align: right;

      .foget-password-btn {
        color: #409EFF;
        font-size: 14px;
        cursor: pointer;
      }
    }

    .login-btn {
      margin-top: 20px;
      width: 100%;

      .el-button {
        width: 100%;
      }
    }

    .go-register {
      margin-top: 20px;
      font-size: 14px;

      .go-register-btn {
        color: #409EFF;
        cursor: pointer;
      }
    }
  }
}
</style>

<style lang="scss">
:deep(.el-tabs__item) {
  color: #333;
  font-size: 18px;
}

:deep(.el-form-item) {
  display: flex;
  align-items: center;
}

:deep(.el-form-item__content) {
  margin-left: 0px !important
}

:deep(.el-input__inner) {
  height: 40px;
}

:deep(.el-form-item__label) {
  font-size: 18px;
  color: #333;
}
</style>